<script setup>
import fieldModel from "@/models/fieldModel.js"
import { defineProps, ref, computed } from "vue";

const { meta, vm } = defineProps(["meta", "vm"]);
const enumEntry = meta["enum-values"] || [];
const dataModel = vm.getModelRef(meta.model);
const field = fieldModel(vm, dataModel, meta);
const enumDict = ref({

});
enumEntry.forEach(x => {
  enumDict.value[x.value] = x.title;
});

const displayValue = computed(() => {
  let v = field.value.getValue();
  if (v == null || v == "") {
    return "~";
  } else {
    return enumDict.value[v] || "[" + v + "]";
  }
});
</script>

<template>
  <span v-if="field.isEditing">
    <el-switch v-model="field.value" active-value="true" inactive-value="false" />
    <el-text>
      {{ displayValue }}
    </el-text>
  </span>
  <el-text v-else class="m-2">{{ displayValue }}</el-text>
</template>